<template>
  <v-layout type="main">
    <!-- <p class="page-title">模型应用</p> -->
    <!-- <div class="detail-box" v-if="detailData">
      <div class="pic">
        <v-image class="avatar" alt="" />
      </div>
      <div class="word">
        <h3 class="title">
          <h3 class="info-title"> {{ detailData.name }}<i class="el-icon-edit-outline alick-btn-edit"
              @click="updateBase" /></h3>
          <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/deploy' })" />
        </h3>
        <p class="hint"> <span>状态：<strong :class="['alick-layout-status', detailData.status]">{{
          statusMap[detailData.status]
        }}</strong></span> {{ detailData.desc }}</p>
        <div class="alick-handle-btns">
          <a class="handle-btn" href="javascript:;" @click="start" v-show="detailData.status == 'terminated'">启动</a>
          <a class="handle-btn" href="javascript:;" @click="entry" v-show="detailData.status == 'running'">打开测试页</a>
          <a class="handle-btn" href="javascript:;" @click="stop" v-show="detailData.status != 'terminated'">停止</a>
        </div>
      </div>
    </div> -->
    <!-- <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike"
      v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.meta.title }}</span>
      </el-radio-button>
    </el-radio-group> -->

    <div class="layout-top">
      <div class="code-description" v-if="detailData !== null">
        <div class="code-desc-header">
          <div class="title">
            <div class="title-header">
              <span>{{ detailData.name }}</span>
              <!-- <i class="el-icon-edit-outline alick-btn-edit" @click="updateTask" /> -->
              <!-- <el-tag type="danger" effect="dark" size="mini" v-if="detailData.status === 'terminated'">
                {{ statusMap[detailData.status] }}
              </el-tag>
              <el-tag type="warning" effect="dark" size="mini"
                v-else-if="detailData.status != 'terminated' && detailData.status != 'running'">
                {{ statusMap[detailData.status] }}
              </el-tag>
              <el-tag type="success" effect="dark" size="mini" v-else>
                {{ statusMap[detailData.status] }}
              </el-tag> -->
            </div>

            <div class="code-tags" v-if="detailData.status">
              <el-tag effect="dark" size="mini">
                {{
                  detailData.create_user && (detailData.create_user.nick_name ||
                    detailData.create_user.username) || "admin"
                }}
              </el-tag>

              <!-- <el-tag type="danger" effect="dark" size="mini" v-if="detailData.status === 'terminated'">
              {{ statusMap[detailData.status] }}
            </el-tag>
            <el-tag type="warning" effect="dark" size="mini"
              v-else-if="detailData.status != 'terminated' && detailData.status != 'running'">
              {{ statusMap[detailData.status] }}
            </el-tag>
            <el-tag type="success" effect="dark" size="mini" v-else>
              {{ statusMap[detailData.status] }}
            </el-tag> -->

              <el-tag type="info" effect="dark" size="mini">{{ detailData.create_time }}</el-tag>
            </div>
          </div>

          <!-- <div class="code-status" v-if="detailData.status">
          <plug-state :statusStr="detailData.status" />
        </div> -->
        </div>
      </div>
      <!-- <div class="code-status" v-if="detailData.status">
        <plug-state-edge :statusStr="detailData.status" />
      </div> -->

      <div class="btns-container" v-if="detailData !== null">
        <div class="alick-handle-btns">
          <el-button class="handle-btn" type="success" size="medium" @click="start"
            v-if="detailData.status.toLocaleLowerCase() === 'running'">
            重新部署
          </el-button>
          <el-button class="handle-btn" type="success" size="medium" @click="start" v-else>
            启动
          </el-button>
        </div>
      </div>
    </div>
    <!-- 
    <div class="tabs-box">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="`${e.name}`" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs>
    </div> -->

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :detailData="detailData" v-if="detailData" @getDetail="getDetail" />
    </div>

    <el-dialog :visible.sync="showUpdateBaseDialog" title="模型部署基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="addForm.desc" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </v-layout>
</template>

<script>
// import plugStateEdge from '@/components/module/plug-state-edge'
import { getDeployDetail, putDeploy, startServing, stopServing } from '@/api/edgeDeploy'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: null,
      addForm: {},
      showUpdateBaseDialog: false,
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
      },
    };
  },
  // components: { plugStateEdge },
  methods: {
    skip() {
      let path = `/edge/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getDetail() {
      if (!this.$route.query.id) return
      let res = await getDeployDetail({ id: this.$route.query.id });
      console.log('res', res)
      if (res && res.data) {
        this.detailData = res.data;
        this.addForm = JSON.parse(JSON.stringify(this.detailData))
      }
    },
    entry() {
      let path = "http://" + this.detailData.tcp_port_list[0].endpoint + '/v1/index'
      window.open(path, '_blank');
    },
    updateBase() {
      this.showUpdateBaseDialog = true
    },
    avatarPath(data) {
      this.addForm.avatar = data;
    },
    commitBase() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putDeploy(this.addForm);
          if (res && res.data) {
            this.getDetail()
            this.showUpdateBaseDialog = false
          }
        }
      })
    },
    cancel() {
      this.showUpdateBaseDialog = false
    },
    async start() {
      await startServing(this.detailData.id);
      this.getDetail()
      this.$forceUpdate()
    },
    async stop() {
      await stopServing(this.detailData.id);
      this.getDetail()
      this.$forceUpdate()
    },

  },
  mounted() {
    // let temp = this.$router.options.routes.filter(
    //   e => e.name == 'edge' && e.children
    // )
    // this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
    // this.$EventBus.$on('serving', e => {
    //   console.log(e)
    //   this.getDetail()
    // })
  },
  destroyed() {
    this.$EventBus.$off('serving')
  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>